<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>团队工作上报管理<small>团队工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>团队工作</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">待确认</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <p align="center" style="font-size: larger;font-weight: normal;color: #3c8dbc">团队待确认报表</p>
                <!--表格-->
                <template>
                    <el-table
                            :data="tableData"
                            ref="multipleTable"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="formNumber"
                                label="报表编号"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="formTitle"
                                label="活动名称"
                                align="center"
                        width="100px">
                        </el-table-column>
                        <el-table-column
                                prop="workDate"
                                label="工作日期"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="submitDate"
                                label="填报日期"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="提交人"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template  slot-scope="scope">
                                <el-row>
                                    <el-button type="primary" size="small" @click="checkSubmitItem(scope.$index)">查看</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <!--查看报表工作项弹框-->
                <el-dialog
                        title=""
                        :visible.sync="dialogVisibleCheckItem"
                        width="80%">
                    <div style="font-weight: bolder;margin-bottom: 20px" align="center">
                        <span style="color: red">{{username}}</span>
                        <span>待确认报表详细信息</span>
                    </div>
                    <div  style="font-family: 华文楷体">
                        <span>报表编号：</span>
                        <span v-model="formNumber" style="color: blue;margin-right: 130px">{{formNumber}}</span>
                        <span>完成日期：</span>
                        <span v-model="workDate"  style="color: blue;margin-right: 130px">{{workDate}}</span>
                        <span>提交时间：</span>
                        <span v-model="submitDate" style="color: blue;">{{submitDate}}</span>
                    </div>
                    <div style="font-family: 华文楷体">完成人：
                        <span v-for="(member,index) in members" style="color: blue;">
                            {{member}}
                            <span v-if="index!=(members.length-1)">、</span>
                        </span>
                    </div>
                    <div style="font-family: 华文楷体">
                        完成方式：
                        <span v-if="flag==true" style="color: blue;">各人工作量相同</span>
                        <span v-else style="color: blue;">各人工作量不同</span>
                    </div>
                    <hr style="height:1px;border-radius: 3px; background-color: #3c8dbc">
                    <div>
                        <template>
                            <el-table
                                    :data="checkTableData"
                                    ref="checkMultipleTable"
                                    style="width: 100%;"
                                    :row-class-name="tableRowClassName"
                                    @selection-change="checkHandleSelectionChange">
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="50">s
                                </el-table-column>
                                <el-table-column
                                        prop="item"
                                        label="工作项"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="grade"
                                        label="单项分值"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="number"
                                        label="数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="count"
                                        label="小计"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="remark"
                                        label="备注"
                                        align="center">
                                </el-table-column>
                            </el-table>
                            <!--按钮-->
                            <div style="margin-top: 10px" align="center">
                                <el-row>
                                    <el-button style="margin-right: 30px" type="success" @click="confirmYes()" plain>确认</el-button>
                                    <el-button style="margin-right: 30px" type="danger" @click="refuseConfirm()" plain>拒绝确认</el-button>
                                    <el-button style="margin-right: 30px" type="primary" @click="goBack()" plain>返回</el-button>
                                </el-row>
                            </div>
                        </template>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--表格相关数据-->
                tableData: [],
                checkTableData:[],
                <!--查看报表工作项信息弹框-->
                dialogVisibleCheckItem:false,
                input:[],
                <!--查看报表弹窗表格相关数据-->
                formNumber:'',
                username:'李四',    //当前登录本系统的用户名
                workDate:'',
                submitDate:'',
                members:[],
                flag:true,  //标记是“模板复制”还是“按人填报”，true：“模板复制”
                formIndex:'',
            };
        },
        created() {
            this.findAll();
        },
        methods: {
            <!--查询当前用户的所有待提交报表信息-->
            findAll(){
                let idCardNumber = "440883199412204773";
                axios.get("/kpi_assess/teamSubmitForms/" + idCardNumber).then((resp)=>{
                    this.tableData = resp.data.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].submitDate = new Date(this.tableData[i].submitDate).toLocaleString();
                        this.tableData[i].workDate = new Date(this.tableData[i].workDate).toLocaleDateString();
                    }
                });

            },
            <!--查看报表：弹窗显示-->
            checkSubmitItem(index){
                this.formIndex = index;
                this.dialogVisibleCheckItem=true;
                if (this.tableData[index].submitItems[0].username != null){
                    let j = 0;
                    for (let i = 0; i < this.tableData[index].submitItems.length; i++) {
                        if (this.tableData[index].submitItems[i].username===this.username){
                            this.checkTableData[j++] = this.tableData[index].submitItems[i];
                        }
                    }
                }else{
                    this.checkTableData = this.tableData[index].submitItems;
                }
                this.formNumber = this.tableData[index].formNumber;
                this.workDate = this.tableData[index].workDate;
                this.submitDate = this.tableData[index].submitDate;
                for (let i = 0; i < this.tableData[index].members.length; i++) {
                    this.members[i] = this.tableData[index].members[i].username;
                }
                //判断是“模板复制”模式还是“按人填报”模式
                if (this.tableData[index].submitItems[0].username!=null){
                    this.flag = false;
                }else{
                    this.flag = true;
                }
            },
            <!--查看报表弹窗：点击返回按钮-->
            goBack(){
                this.dialogVisibleCheckItem=false;
            },
            <!--用户点击确认团队报表-->
            confirmYes(){
                let index = this.formIndex;
                let updateMember = '';
                for (let i = 0; i < this.tableData[index].members.length; i++) {
                    //这里使用用户名查找，存在一定的不严谨，因为用户名是不唯一的
                    //等后期完成“权限认证”这一块，可以通过使用身份证号码来代替用户名
                    if (this.tableData[index].members[i].username == this.username){
                        updateMember = this.tableData[index].members[i];
                        break;
                    }
                }
                axios.post("/kpi_assess/teamSubmitForms/confirmCertain",updateMember).then((resp)=>{
                    if (resp.data.data){
                        this.$message({
                            message:"确认个人报表成功！",
                            type:"success",
                        })
                        this.findAll();
                        this.dialogVisibleCheckItem=false;
                    }else{
                        this.$message.error("确认个人报表失败！");
                    }
                })
            },
            <!--用户点击拒绝确认团队报表-->
            refuseConfirm(){
                let index = this.formIndex;
                let updateMember = '';
                for (let i = 0; i < this.tableData[index].members.length; i++) {
                    //这里使用用户名查找，存在一定的不严谨，因为用户名是不唯一的
                    //等后期完成“权限认证”这一块，可以通过使用身份证号码来代替用户名
                    if (this.tableData[index].members[i].username == this.username){
                        updateMember = this.tableData[index].members[i];
                        break;
                    }
                }
                console.log(updateMember);
                //点击拒绝确认，则触发输入“拒绝原因”的弹框
                this.$prompt('请输入拒绝原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,20}$/,
                    // inputErrorMessage: '拒绝原因格式不正确，字数范围为1~20'
                }).then(({ value }) => {
                    let refuseConfirmReason={
                        'memberId':updateMember.id,
                        'reason':value,
                    };
                    axios.post("/kpi_assess/teamSubmitForms/refuseCertain",refuseConfirmReason).then((resp)=>{
                        if (resp.data.data){
                            this.$message({
                                message:"拒绝确认成功！",
                                type:"success",
                            })
                            this.findAll();
                            this.dialogVisibleCheckItem=false;
                        }else{
                            this.$message.error("拒绝确认失败！");
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    })
</script>
</html>